<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
      计算属性：
        对于任何复杂逻辑，都应当使用计算属性
        计算属性看似是一个函数，但它返回了一个结果，只要依赖的值不改变，那么计算属性的值就不会改变
        多次调用，只执行一次
      计算属性的优点：
        减少模板中的计算逻辑 -- 不要把表达式都写在页面中
        进行数据缓存 -- 调用多次，执行一次 / 多个地方使用，就只执行一次
        依赖固定的数据类型(响应式数据) -- a+b计算出c,a或者b改变时，c会同步改变
      计算属性有getter、setter方法
        直接调用计算属性，就是调用它的getter方法

      计算属性( computed )  PK 方法(methods):
        计算属性：只要值不变，不管调用几次，都只执行一次
        方法：调用几次就执行几次
        所以：如果 方法和计算属性都能解决问题的时候，优先选择计算属性
        结论：在特定的条件下，计算属性具有依赖性，只要依赖的值不发生改变，则计算属性只执行一次，而方法是调用几次就执行几次
    -->
    <div id="app">
        <div>{{msg}}</div>
        <!-- 实现翻转字符串 -->
           <div>表达式：{{this.msg.split('').reverse().join('')}}</div><!-- 模板语法中的表达式 -->
           <!--  用计算属性来实现-->
           <div>计算属性：{{reverseMsg}}</div> <!-- 计算属性还是属性，可以用模板语法，而不是调用函数方法 -->
           <!-- 调用多次，也只执行一次(下面的congsole.log('computed')只输出了一次),因为计算属性具有依赖性  -->
           <div>调用三次：{{reverseMsg}} ---{{reverseMsg}}---{{reverseMsg}} </div>
           
           <div>方法：{{ reverseMsgFn() }}</div> <!-- 调用函数方法得加()-->
           <!-- 调用多次，执行多次 (下面的congsole.log('methods')输出了三次)-->
           <div>方法：{{ reverseMsgFn() }} -- {{ reverseMsgFn() }} -- {{ reverseMsgFn() }} </div>

    </div>
</body>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:'hello vue',
        },
        computed:{ // 计算属性
            reverseMsg(){
                console.log('methods')
                return this.msg.split('').reverse().join('') //必须携带返回值
            }
        },
        methods:{
            reverseMsgFn(){
                console.log('computed')
                return this.msg.split('').reverse().join('') //必须携带返回值
            }
        }
    })
</script>
</html>